<template>
  <div class="inside-page">
    <div class="job-wrap">
      <div class="job-wrap-container">
        <div class="text">
          <span class="job-name">{{ info.name }}</span>
        </div>
        <div class="text tag-box">
          <span
            class="tag"
            v-for="(v, i) in company.welfare"
            :key="'welfare_' + i"
            >{{ v }}</span
          >
        </div>
        <div class="wrap">
          <p class="money" v-if="info.payid">
            {{ info.payid }}-{{ info.pay_end }}k
          </p>
          <p>
            <i class="iconfont icon-map"></i><span>{{ info.city_name }}</span>
          </p>
          <p>
            <i class="iconfont icon-edit"></i
            ><span>{{ info.is_all === 0 ? '实习' : '全职' }}</span>
          </p>
          <p>
            <i class="iconfont icon-hat"></i><span>{{ info.eid }}</span>
          </p>
          <p>
            <i class="iconfont icon-people"></i><span>{{ info.num }}人</span>
          </p>
        </div>
        <div class="time">
          <p>
            <i class="iconfont icon-time"></i
            ><span>申请截止：{{ info.end_time }}</span>
          </p>
        </div>
        <div class="job-btn">
          <button
            type="button"
            :class="[info.is_apply === 1 && 'active']"
            @click="toApply"
          >
            {{ info.is_apply === 1 ? '已申请' : '立即申请' }}
          </button>
          <button
            type="button"
            :class="[info.is_collect === 1 && 'active']"
            @click="toCollect"
          >
            {{ info.is_collect === 1 ? '已收藏' : '收藏职位' }}
          </button>

          <button
            type="button"
            @click="connect"
            v-permission="['personal']"
            style="background:#70a1ff;color:#ffffff"
          >
            联系企业
          </button>
        </div>
      </div>
    </div>
    <div class="job-detail content clearfix">
      <div class="job-left">
        <p class="detail-title">职位描述</p>
        <div class="desc">
          <div class="desc-container">
            <p class="desc-title">职责描述：</p>
            <div class="desc-content">
              <p v-html="info.duty"></p>
            </div>
            <p class="pos-title">岗位要求：</p>
            <div class="pos-content">
              <p v-html="info.request"></p>
            </div>
          </div>
        </div>
        <p class="detail-title">其他信息</p>
        <div class="other">
          <div class="other-item">
            <p>
              <span>工作地点：</span><span>{{ info.for_bumen }}</span>
            </p>
            <p>
              <span>专业要求：</span><span>{{ info.major }}</span>
            </p>
          </div>
        </div>
        <p class="detail-title">该公司其他职位</p>
        <div class="job-list">
          <div
            class="job-item clearfix"
            v-for="j in jobList"
            :key="j.id"
            @click="jumpToJob(j.id)"
          >
            <div class="job-pos">
              <div class="text">
                <span class="job-name">{{ j.name }}</span>
                <span class="money" v-if="j.payid"
                  >{{ j.payid }}-{{ j.pay_end }}k</span
                >
              </div>
              <div class="wrap">
                <p>
                  <i class="iconfont icon-map"></i
                  ><span>{{ j.city_name }}</span>
                </p>
                <p>
                  <i class="iconfont icon-edit"></i
                  ><span>{{ j.is_all === 0 ? '实习' : '全职' }}</span>
                </p>
                <p>
                  <i class="iconfont icon-hat"></i><span>{{ j.eid }}</span>
                </p>
              </div>
            </div>
            <div class="job-company">
              <p class="name">{{ company.cname }}</p>
              <p class="type">{{ company.industry_data }}</p>
            </div>
            <div
              class="job-logo"
              :style="{
                background:
                  'url(' + company.logo + ') center center / cover no-repeat',
              }"
            ></div>
          </div>
          <div class="more-job">
            <button type="button" class="more-btn" @click="jumpTo">
              更多职位
            </button>
          </div>
        </div>
      </div>
      <div class="job-right">
        <div class="intro" @click="jumpTo">
          <p class="logo">
            <img :src="company.logo" />
          </p>
          <p class="name">{{ company.cname }}</p>
          <p class="pro">公司性质：{{ company.attr_data }}</p>
          <p class="pro">公司规模：{{ company.size_data }}</p>
          <p class="pro">所属行业：{{ company.industry_data }}</p>
        </div>
        <div class="intro-text">
          <p class="con" v-html="intro"></p>
          <p v-if="showToggle" class="toggle-btn" @click="toggleText">
            {{ toggleActive ? '收起' : '展开' }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { jobDetail, collect, apply } from '@/api/company';
import {addChat, addChat1} from '@/api/job';
export default {
  // middleware: 'auth',
  asyncData ({ query, params, error }) {
  },
  components: {},
  data () {
    return {
      jobId: '',
      info: {},
      active: true,
      apply: false,
      company: {
        welfare: ['五险一金', '定期体检', '年底双薪', '下午茶', '节日福利'],
      },
      showToggle: false,
      intro: '',
      toggleActive: false,
      jobList: [],
    }
  },
  head () {
    return {
      titleTemplate: (titleChunk) => {
        return `${titleChunk} - 大学生找工作、找实习`;
      }
    }
  },
  created () {
    this.jobId = this.$route.query.id;
    this.fetchData();
  },
  mounted () {
  },
  watch: {
    '$route' (val) {
      if (val && val.query && val.query.id) {
        if (val.query.id !== this.jobId) {
          this.$router.go(0)
        }
      }
    }
  },
  computed: {
  },
  methods: {
    connect () {
      addChat1({
        cid: this.company.id
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('添加联系人成功，可进入交流平台进行交流');
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.error(err)
        this.$message.error(err);
      })
    },
    checkIntro () { // 检查公司简介
      const originIntro = this.company.description || '';
      originIntro.length >= 125
        ? (this.intro = originIntro.slice(0, 125) + '...') && (this.showToggle = true)
        : this.intro = originIntro
    },
    toggleText () {
      this.toggleActive = !this.toggleActive;
      this.toggleActive ? (this.intro = this.company.description) : (this.intro = this.company.description.slice(0, 125) + '...');
    },
    toCheck (text) {
      return text.replace(/\n/g, '<br/>');
    },
    handleCurrentChange (val) {
      this.pageNo = val;
      this.getPageArticle();
    },
    jumpToJob (id) {
      this.$router.push({
        path: '/job/detail',
        query: { id }
      })
    },
    jumpTo () {
      this.$router.push({
        path: '/company/detail',
        query: { id: this.company.id }
      })
    },
    toCollect () { // 收藏
      collect({
        jid: this.info.id,
      }).then(res => {
        if (res.code === 200) {
          this.info.is_collect === 1
            ? this.info.is_collect = 0
            : this.info.is_collect = 1
          this.$message.success(res.msg || '提交成功！');
        } else {
          this.$message.error(res.msg || '网络错误, 稍后再试！');
        }
      }).catch(err => {
        console.error(err);
        this.$message.error(err)
      })
    },
    toApply () { // 申请
      apply({
        job_id: this.info.id,
        com_id: this.company.id,
      }).then(res => {
        if (res.code === 200) {
          this.info.is_apply === 1
            ? this.info.is_apply = 0
            : this.info.is_apply = 1
          this.$message.success(res.msg || '提交成功！');
        } else if (res.code === 2001) {
          this.$message.info('请完善简历');
          this.$router.push('/user');
        } else {
          this.$message.error(res.msg || '网络错误, 稍后再试！');
        }
      }).catch(err => {
        console.error(err);
        this.$message.error(err)
      })
    },
    fetchData () {
      jobDetail({
        id: this.jobId,
      }).then(res => {
        if (res.code === 200) {
          this.info = res.data && res.data.jobinfo;
          this.company = res.data && res.data.company;
          this.jobList = res.data && res.data.job_other;
          res.data && res.data.company && (res.data.company.description = this.toCheck(res.data.company.description))
          this.checkIntro();
        } else {
          this.$message.error(res.msg || '网络错误, 稍后再试！');
        }
      }).catch(err => {
        console.error(err);
        this.$message.error(err)
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.inside-page {
  width: 100%;
  position: relative;
  .job-wrap {
    width: 100%;
    min-height: 220px;
    padding-top: 40px;
    background: #f6f7f8;
    position: relative;
    .job-wrap-container {
      width: $base-width;
      margin: 0 auto;
      position: relative;
      .text {
        margin-bottom: 10px;
        .job-name {
          font-size: 36px;
          color: #24292f;
          margin-right: 20px;
        }
        .tag {
          display: inline-block;
          font-size: 12px;
          color: $base-color;
          padding: 4px 8px;
          border: 1px solid $base-color;
          border-radius: 4px;
          margin-right: 10px;
          margin-top: 10px;
        }
      }
      .tag-box {
        max-width: 750px;
      }
      .wrap {
        margin-top: 20px;
        p {
          margin-right: 30px;
          display: inline-block;
          line-height: 20px;
          vertical-align: middle;
          i {
            color: $base-color;
            margin-right: 5px;
            font-size: 16px;
            vertical-align: middle;
          }
          span {
            vertical-align: middle;
            font-size: 14px;
            color: #24292f;
          }
        }
        .money {
          color: $base-color-important;
          font-size: 18px;
          line-height: 20px;
        }
      }
      .time {
        height: 50px;
        line-height: 50px;
        padding-left: 15px;
        position: relative;
        i,
        span {
          margin-right: 10px;
          font-size: 14px;
          color: #666;
        }
        &::before {
          content: '';
          height: 14px;
          width: 2px;
          background: $base-color;
          position: absolute;
          left: 2px;
          top: 18px;
        }
      }
      .job-btn {
        position: absolute;
        right: 0;
        top: 48px;
        width: 450px;
        height: 44px;
        font-size: 0;
        button {
          float: right;
          height: 44px;
          width: 120px;
          margin-left: 20px;
          border: 1px solid $base-color;
          border-radius: 6px;
          background: #fff;
          color: $base-color;
          font-size: 16px;
          overflow: hidden;
          &:hover,
          &.active {
            background: $base-color;
            color: #fff;
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
  .job-detail {
    position: relative;
    .job-left {
      width: 860px;
      float: left;
      .desc-title,
      .pos-title {
        color: #999;
        padding: 20px 0;
      }
      .desc {
        padding-left: 15px;
      }
      .desc-content,
      .pos-content {
        margin-bottom: 20px;
        p {
          color: #666;
          line-height: 32px;
        }
      }
      .other {
        padding-left: 15px;
        margin-top: 20px;
        .other-item {
          p {
            margin-bottom: 20px;
            height: 20px;
            line-height: 20px;
            display: inline-block;
            margin-right: 130px;
            &:last-child {
              margin: 0;
            }
            span {
              &:first-child {
                color: #999;
              }
              &:last-child {
                color: #666;
              }
            }
          }
        }
      }
    }
    .job-right {
      float: right;
      width: 340px;
      padding-left: 10px;
      .intro {
        padding: 20px 0;
        border-bottom: 1px solid #ebebeb;
        cursor: pointer;
      }
      .logo {
        height: 120px;
        line-height: 120px;
        width: 120px;
        margin: 0 auto;
        border: 1px solid #ebebeb;
        border-radius: 8px;
        overflow: hidden;
        text-align: center;
        img {
          height: 100%;
          vertical-align: middle;
        }
      }
      .name {
        margin: 20px 0 30px 0;
        text-align: center;
        color: #24292f;
        font-size: 18px;
        &:hover {
          color: $base-color;
        }
      }
      .pro {
        padding-left: 90px;
        margin-bottom: 10px;
        color: #666;
        font-size: 14px;
      }
      .intro-text {
        position: relative;
        padding: 20px 0;
        border-bottom: 1px solid #ebebeb;
        p {
          font-size: 14px;
          line-height: 26px;
        }
        .con {
          color: #666;
          letter-spacing: 1.6px;
        }
        .toggle-btn {
          position: absolute;
          right: 0;
          bottom: 20px;
          color: $base-color;
          &:hover {
            cursor: pointer;
            color: $base-color-hover;
          }
        }
      }
    }
  }

  .job-list {
    margin: 20px auto;
    .job-item {
      height: 120px;
      width: 100%;
      border: 1px solid #ebebeb;
      background: #fff;
      margin-bottom: 10px;
      padding-left: 40px;
      cursor: pointer;
      &:hover {
        background: #f6f7f8;
      }
      & > div {
        float: left;
      }
      .job-pos {
        width: 450px;
        font-size: 18px;
        margin-top: 30px;
        .job-name {
          color: #242924;
          margin-right: 40px;
        }
        .money {
          color: $base-color-important;
        }
        .wrap {
          margin-top: 10px;
          p {
            margin-right: 10px;
            color: #999;
            line-height: 20px;
            font-size: 14px;
            display: inline-block;
          }
          i {
            vertical-align: middle;
            color: #999;
            margin-right: 5px;
          }
          span {
            vertical-align: middle;
            color: #999;
          }
        }
      }
      .job-company {
        margin-top: 30px;
        width: 280px;
        .name {
          color: #24292f;
          margin-top: 10px;
        }
        .type {
          color: #999;
          font-size: 12px;
          margin-top: 5px;
        }
      }
      .job-logo {
        margin-top: 24px;
        width: 74px;
        height: 74px;
        overflow: hidden;
      }
    }
  }
  .more-job {
    width: 860px;
    margin: 40px 0;
    text-align: center;
    .more-btn {
      height: 40px;
      width: 200px;
      background: #fff;
      color: $base-color;
      font-size: 18px;
      letter-spacing: 2px;
      outline: none;
      border: 1px solid $base-color;
      border-radius: 4px;
      &:hover {
        background: $base-color;
        color: #fff;
        cursor: pointer;
      }
    }
  }
}
</style>
